<template>
	<view class="mine-container">
		<!-- 顶部个人信息栏 -->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view class="cu-avatar xl round bg-white">
						<!-- <view class="iconfont icon-people text-gray icon"></view> -->
					</view>
					<view v-if="!userInfo" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="userInfo"  class="user-info">
						<view class="u_title">用户名：{{ userInfo.name }}</view>
						<view class="u_desc">{{userInfo.compName}}</view>
					</view>
				</view>
				<view  class="flex align-center arrow-container">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 功能菜单 -->
			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<u-icon color="#007AFF" size="20" name="account"></u-icon>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<u-icon color="#007AFF" size="20" name="heart"></u-icon>
						<view>关于我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<u-icon color="#007AFF" size="20" name="setting"></u-icon>
						<view>应用设置</view>
					</view>
				</view>
			</view>

			<!-- 退出登录按钮 -->
			<view class="logout-btn" @click="handleLogout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				userInfo:null,
			}
		},
		computed: {
			avatar() {
				return '123' // 实际项目中替换为真实头像地址
			},
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')

		},
		
		methods: {
		
			handleToEditInfo() {
				this.$commonFn.Navto('/pages/mine/info')
			},
			handleToSetting() {
				this.$commonFn.Navto('/pages/mine/setting')
			},
			handleAbout() {
				this.$commonFn.Navto('/pages/mine/about')
			},
		
			handleLogout() {
				// 退出登录逻辑
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
		font-size: 14px;
	}

	.mine-container {
		width: 100%;
		height: 100%;
		overflow: hidden;

		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
		.header-section {
			padding: 30rpx 30rpx 120rpx;
			background: linear-gradient(135deg, #3c96f3 0%, #5aabff 100%);
			color: white;
			position: relative;
			z-index: 1;

			// 顶部信息区布局
			.flex {
				display: flex;
				align-items: center;
			}

			.padding {
				padding: 10rpx 0;
			}

			.justify-between {
				justify-content: space-between;
			}

			.align-center {
				align-items: center;
			}

			// 头像样式
			.cu-avatar {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
				transition: transform 0.2s ease;

				&:active {
					transform: scale(0.95);
				}

				.icon {
					font-size: 70rpx;
					color: #666;
				}
			}

			// 登录提示
			.login-tip {
				font-size: 34rpx;
				margin-left: 20rpx;
				font-weight: 500;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			// 用户信息
			.user-info {
				margin-left: 20rpx;

				.u_title {
					font-size: 34rpx;
					line-height: 50rpx;
					font-weight: 500;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.u_desc {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 5rpx;
				}
			}

			// 右侧箭头区域
			.arrow-container {
				padding: 15rpx 10rpx;
				border-radius: 40rpx;
				transition: background-color 0.2s ease;

				&:active {
					background-color: rgba(255, 255, 255, 0.1);
				}

				text {
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.icon-right {
					font-size: 30rpx;
					transform: translateY(2rpx);
				}
			}
		}

		// 内容区域
		.content-section {
			position: relative;
			top: -60rpx;
			padding: 0 30rpx;
			z-index: 2;

			// 菜单列表
			.menu-list {
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.05);
				overflow: hidden;
			}

			// 列表项样式
			.list-cell {
				padding: 0 30rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;
				transition: background-color 0.2s ease;

				&:last-child {
					border-bottom: none;
				}

				&:active {
					background-color: #f9f9f9;
				}

				// 带箭头的列表项
				&.list-cell-arrow::after {
					content: '';
					display: block;
					width: 16rpx;
					height: 16rpx;
					border-top: 2rpx solid #c8c8c8;
					border-right: 2rpx solid #c8c8c8;
					transform: rotate(45deg);
				}

				// 菜单项内容
				.menu-item-box {
					display: flex;
					align-items: center;
					width: 100%;

					view {
						font-size: 30rpx;
						color: #333;
						margin-left: 24rpx;
					}
				}
			}

			// 退出登录按钮
			.logout-btn {
				margin-top: 40rpx;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #ff4d4f;
				box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.05);
				transition: all 0.2s ease;

				&:active {
					background-color: #f9f9f9;
					transform: scale(0.99);
				}
			}
		}
	}
</style>